<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no" />
		<title>订单列表</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的订单</h1>
		</header>
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper transparent">
			<div class="mui-scroll">
				<ul class="nav-list" id="orderNav">
					<li data-status="0">全部订单</li>
					<li data-status="1">待付款</li>
					<li data-status="2">待发货</li>
					<li data-status="3">待收货</li>
					<li data-status="5">待评价</li>
				</ul>
				<div id="orderList">
				</div>
			</div>
		</div>
		<div id="dcontent" class="dcontent"></div>
		<div id="bonusBox" class="dcontent bonus-content"></div>
		<script src="js/mui.min.js"></script>
		<script src="js/delayimg.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/template.js"></script>
		<script>
		
			var isnodata = false,
				page = 1,
				orderStatus,
				payOrderId,
				pays={},
				mask=null,
				loadPage,
				bonusId,
				maskBonus,
				shares = {},
				w,
				orderList=document.getElementById('orderList');
			mui.init({
				pullRefresh : {
				    container:'#pullrefresh',
				    deceleration:0.0006,
				    up : {
					    contentrefresh : "正在加载...",
					    contentnomore:'已加载完订单',
					    callback :function(){
					      	var self=this;
					      	if (!isnodata) {
					      		page++;
						        mui.ajax(URL+'api/MemberOrder/GetOrders?orderStatus='+orderStatus+'&pageNo='+page+'&pageSize=10',{
									dataType:'json',
									type:'get',
									timeout:10000,
									success:function(data){
										if(data.Success=='true'){
						                    var html='';
									        if(data.Orders.length > 0) {
									        	orderList.insertAdjacentHTML('beforeend',template('initData', data));
									        	delayimg.render();
									        }else{
												isnodata = true;
											}
						                    //if (orderTotal<=page*10) {isnodata = true;}
											self.endPullupToRefresh(isnodata);
					      					
										}
									},
									error:function(xhr,type,errorThrown){
										plus.nativeUI.toast('请求失败，请检查网络')
									}
								});
						    }else{
						    	self.endPullupToRefresh(isnodata);
						    }
				    	}
				    }
				},
				swipeBack: true
			});
			
			if (mui.os.android)
				document.getElementsByClassName('mui-scroll')[0].className='';
			
			mui.plusReady(function() {
				var ws=plus.webview.currentWebview();
				orderStatus=ws.orderStatus;
				bonusId=ws.bonusId;
				document.querySelector('li[data-status="'+orderStatus+'"]').className='active';
	            
				ws.setStyle({scrollIndicator:'none'});
				w=plus.nativeUI.showWaiting('',{padlock:true});
				loadPage=function(){
					mui.ajax(URL+'api/MemberOrder/GetOrders?orderStatus='+orderStatus+'&pageNo=1&pageSize=10',{
						dataType:'json',
						type:'get',
						timeout:10000,
						success:function(data){
							if(data.Success=='true'){
						        if(data.Orders.length > 0) {
						            orderList.innerHTML=template('initData', data);
						            delayimg.init();
						        }else{
						        	var html='<div class="empty-show"><h4>暂无此类订单...</h4><button id="closeWv" class="mui-btn mui-btn-negative">去其他地方逛逛</button></div>';
						        	orderList.innerHTML=html;
						        }
								w.close();
								if(bonusId){
									mui.ajax(URL+'api/MemberOrder/GetOrderBonus?orderIds='+bonusId,{
										dataType:'json',
										type:'get',
										timeout:10000,
										success:function(data){
											if(data.Success){
												if(data.List.length >0) {
											        document.getElementById('bonusBox').innerHTML=template('bonusData', data);
													maskBonus = mui.createMask(function(){document.getElementById('bonusBox').className='dcontent bonus-content';});
													maskBonus.show();
													document.getElementById('bonusBox').className='dcontent bonus-content active';
												}
											}
										}
									});
								}
								document.getElementById('pullrefresh').className='mui-content mui-scroll-wrapper';
							}
						},
						error:function(xhr,type,errorThrown){
							w.close();
							reloadWvLoad();
						}
					});
				}
				
				loadPage();
				initPay('dcontent');
			});
			
			function reloadPage(){
				isnodata = false;
				page = 1;
				mui('#pullrefresh').pullRefresh().refresh(true);
				loadPage();
			}
			
			document.addEventListener('updateData', function(e) {
				bonusId=e.detail.bonusId;
				reloadPage();
			});
			
			mui('#bonusBox').on('tap', '.share-bonus-btn', function() {
				shareWeixin(this,maskBonus);
			});
			
			mui('#orderNav').on('tap', 'li', function() {
				w=plus.nativeUI.showWaiting('',{padlock:true});
				orderStatus=this.getAttribute('data-status');
				reloadPage();
				document.getElementById("orderNav").querySelector('.active').className='';
				this.className='active';
			});
			
			mui('#orderList').on('tap', '.vshop-url', function() {
				var vshopid = this.getAttribute('data-id');
				if(vshopid==0){
					plus.nativeUI.toast('该店铺暂未开通微店')
				}else{
					showVshop(vshopid,'/')
				}
			});
			
			mui('#orderList').on('tap', '.showOrder', function() {
				himall.openVW('order-detail.html','',{orderId:this.parentNode.getAttribute('data-id')});
			});
			
			mui('#orderList').on('tap', '.evaluateOrder', function() {
				himall.openVW('order-evaluate.html','',{orderId:this.parentNode.parentNode.getAttribute('data-id')});
			});
			
			mui('#orderList').on('tap', '.evaluateAppendOrder', function() {
				himall.openVW('order-evaluate-append.html','',{orderId:this.parentNode.parentNode.getAttribute('data-id')});
			});
			
			mui('#orderList').on('tap', '.enterOrder', function() {
				var orderId = this.parentNode.parentNode.getAttribute('data-id'),
					btnArray = ['取消', '确认'];
				mui.confirm('请确保您已收到宝贝,再收货！', '', btnArray, function(e) {
					if (e.index == 1) {
				    	mui.ajax(URL+'api/MemberOrder/PostConfirmOrder',{
							data:JSON.stringify({orderId:orderId}),
							dataType:'json',
							type:'POST',
							contentType:'application/json',
							timeout:10000,
							success:function(data){
								if(data.Success=="true"){
									plus.nativeUI.toast('已确认收货');
									reloadPage();
									setTimeout(function(){mui.fire(plus.webview.getWebviewById('user/usercenter.html'),'updateData')},1000)
								}else{
									plus.nativeUI.toast('确认收货失败，请稍后重试')
								}
							},
							error:function(xhr,type,errorThrown){
								plus.nativeUI.toast('请求失败，请检查网络')
							}
						});
					}
				});
			});
			
			mui('#orderList').on('tap', '.cancelOrder', function() {
				var orderId = this.parentNode.parentNode.getAttribute('data-id'),
					btnArray = ['取消', '确认'];
				mui.confirm('确定取消该订单？', '', btnArray, function(e) {
					if (e.index == 1) {
				    	mui.ajax(URL+'api/MemberOrder/PostCloseOrder',{
							data:JSON.stringify({orderId:orderId}),
							dataType:'json',
							type:'POST',
							contentType:'application/json',
							timeout:10000,
							success:function(data){
								if(data.Success=="true"){
									plus.nativeUI.toast('订单取消成功');
									reloadPage();
									setTimeout(function(){mui.fire(plus.webview.getWebviewById('user/usercenter.html'),'updateData')},1000);
								}else{
									plus.nativeUI.toast('订单取消失败，请稍后重试')
								}
							},
							error:function(xhr,type,errorThrown){
								plus.nativeUI.toast('订单取消失败，请检查网络')
							}
						});
					}
				});
			});
			
			mui('#orderList').on('tap', '.payOrder', function() {
				payOrderId = this.parentNode.parentNode.getAttribute('data-id');
				if(this.getAttribute('data-amout')<=0){
					var pW=plus.nativeUI.showWaiting();
					mui.ajax(URL+'api/Order/GetPayOrderByIntegral?orderIds='+payOrderId,{
						dataType:'json',
						type:'get',
						timeout:10000,
						success:function(data){
							pW.close();
							if(data.Success=="true"){
								plus.nativeUI.alert('订单需支付金额为零，购买成功，等待发货');
								reloadPage();
								setTimeout(function(){mui.fire(plus.webview.getWebviewById('user/usercenter.html'),'updateData')},1000);
							}else{
								plus.nativeUI.toast('订单支付失败，请稍后重试')
							}
						},
						error:function(xhr,type,errorThrown){
							pW.close();
							plus.nativeUI.toast('订单支付失败，请检查网络')
						}
					});
					
				}else{
					if(!mask)
						mask = mui.createMask(function(){document.getElementById('dcontent').className='dcontent';});
					mask.show();
					document.getElementById('dcontent').className='dcontent active';
				}
			});
			
			var wPay=null;
			mui('#dcontent').on('tap','.custom-btn',function(){
				payOrder(this.id,payOrderId,
					function(){
						plus.nativeUI.alert("支付成功，等待卖家发货！",function(){
							mask.close();
							bonusId=payOrderId;
							reloadPage();
							setTimeout(function(){mui.fire(plus.webview.getWebviewById('user/usercenter.html'),'updateData')},1000);
						});
					},function(){
						mask.close();
						plus.nativeUI.alert("订单支付失败，请重新支付！");
					}
				)
			});
			
		</script>
		
		<script id="initData" type="text/html">
		    {{each Orders as order i}}
			<div class="order-info" data-id="{{order.id}}">
				<div class="item">
					<div class="order-shop">
					<a class="vshop-url" data-id="{{order.vshopId}}"><i class="iconfont icon-dianpu"></i>{{order.shopname}}</a>
					<span class="mui-pull-right">{{order.status}}</span></div>
				</div>
				{{each order.itemInfo as item j}}
                <div class="item showOrder">
                    <div class="buy-goods">
                        <a class="goods-url goods-img"><img src="images/blank.gif" data-delay="{{item.image}}"/></a>
                        <p><em>¥ {{item.price}}</em><span><a class="goods-url">{{item.productName}}</a></span></p>
                        <h5>
                        	<span>x {{item.count}}</span>
                        	{{if item.size}}
								尺寸：{{item.size}}&nbsp;&nbsp;
							{{/if}}
							{{if item.color}}
								颜色：{{item.color}}&nbsp;&nbsp;
							{{/if}}
							{{if item.version}}
								规格：{{item.version}};
							{{/if}}
                        </h5>
                    </div>
                </div>
	            {{/each}}
	            <div class="item showOrder">
	            	<div class="item-text">
	            		{{if order.PaymentTypeValue!=0}}
	                    	<span class="pay-way-notice">{{order.PaymentType}}</span>
	                    {{/if}}
	                    &nbsp;<span class="mui-pull-right order-total">共{{order.productCount}}件商品 &nbsp;&nbsp; 总价：<em>¥ {{order.orderTotalAmount}}</em></span>
	            	</div>
	            </div>
	            {{if order.orderStatus==1}}
	            	<div class="item total-m item-btn">
	            		{{if order.orderType!=3}}
	            			<button class="mui-btn cancelOrder">取消订单</button>
	            		{{/if}}
	            		<button class="mui-btn mui-btn-negative payOrder" data-amout="{{order.orderTotalAmount}}">付款</button>
	            	</div>
	            {{/if}}
	            {{if order.orderStatus==2 && order.PaymentTypeValue==3 && order.orderType!=3}}
	            	<div class="item total-m item-btn">
	            		<button class="mui-btn cancelOrder">取消订单</button>
	            	</div>
	            {{/if}}
	            {{if order.orderStatus==3}}
	            	<div class="item total-m item-btn">
	            		<button class="mui-btn mui-btn-negative enterOrder">确认收货</button>
	            	</div>
	            {{/if}}
	            {{if order.orderStatus==5}}
	            	{{if order.commentCount==0}}
		            	<div class="item total-m item-btn">
		            		<button class="mui-btn mui-btn-negative evaluateOrder">评价</button>
		            	</div>
	            	{{else if !order.HasAppendComment}}
	            		<div class="item total-m item-btn">
		            		<button class="mui-btn mui-btn-negative evaluateAppendOrder">追加评论</button>
		            	</div>
	            	{{/if}}
	            {{/if}}
	        </div>
			{{/each}}

		</script>
		
		<script id="bonusData" type="text/html">
			{{if List.length ==1}}
	        	<div class="bonus-box">
		        	<h3>恭喜你获得<span>{{List[0].ShareCount}}</span>个红包</h3>
			        <h4>把他分享给好友吧</h4>
			        <div class="bg"><img src="images/bonus-box.png"></div>
			        <h5><a class="custom-btn share-bonus-btn" data-href="{{List[0].ShareHref}}" data-title="{{List[0].ShareTitle}}" data-content="{{List[0].ShareDetail}}" >分享给好友</a></h5>
	        	<div>
	        {{/if}}
	        {{if List.length > 1}}
	        	<div class="bonus-box">
		        	<h3>恭喜你获得<span>{{List.length}}</span>个店家的红包</h3>
			        <h4>把他分享给好友吧</h4>
			        <div class="bg"><img src="images/bonus-box.png"></div>
			        {{each List}}
			        	<p>{{$value.ShopName}}{{$value.ShareCount}}个红包<a class="share-bonus-btn" data-href="{{$value.ShareHref}}" data-title="{{$value.ShareTitle}}" data-content="{{$value.ShareDetail}}">我要发红包 <i class="mui-icon mui-icon-arrowright"></i></a></p>
			        {{/each}}
	        	<div>
	        {{/if}}

		</script>
	</body>

</html>